<template>
  <div class="Banner">
    <div class="left">
      <ul>
        <li v-for="(item,) in list" :key="item.id">
          <a href="#">{{ item.title }}</a>
          <span>></span>
        </li>
      </ul>
    </div>
    <div class="right">
      <img src="./images/t1.gif">
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const list = ref([
  { id: 1, title: '苹果', url: '/goods' },
  { id: 2, title: '菠萝', url: '/cart' },
  { id: 3, title: '草莓', url: '/user' },
  { id: 4, title: '西瓜', url: '/order' },
  { id: 5, title: '葡萄', url: '/help' },
  { id: 6, title: '芒果', url: '/customer' },
  { id: 7, title: '芒果', url: '/customer' },
  { id: 8, title: '芒果', url: '/customer' },
  { id: 9, title: '芒果', url: '/customer' },
  { id: 10, title: '芒果', url: '/customer' },
]);
</script>

<style scoped>
.Banner {
  width: 100%;
  height: 400px;
  margin-top: 10px;
  display: flex;
}

.Banner .left {
  width: 200px;
  height: 400px;
  background-color: rgb(66, 58, 58);
}

.Banner .left ul li {
  display: flex;
  color: white;
  width: 200px;
  height: 40px;
}

.Banner .left ul li a {
  color: white;
  font-size: 15px;
  line-height: 40px;
  margin-left: 20px;
}

.Banner .left ul li span {
  font-size: 15px;
  line-height: 40px;
  margin-left: 100px;
  cursor: pointer;
}

.Banner .left ul li:hover {
  background-color: rgb(10, 229, 123);
}

.Banner .right {
  width: 800px;
  height: 400px;
}

.Banner .right img {
  display: block;
  width: 800px;
  height: 400px;
}
</style>